<template>
  <div
    class="hardware-component"
    :class="!ifShowHardwareBtn ? 'fix-btn-hidden' : ''"
  >
    <div
      v-if="ifShowHardwareBtn"
      class="flex-center-wrap cp"
      @click="openDetail"
      style="cursor: pointer;"
    >
      <zl-icon
        icon="icon-tishi1"
        :icon-style="{ width: '22px', height: '22px' }"
        class="feedback-ico"
      ></zl-icon>
      <!-- <img src="//image.zlketang.com/public/news/images/ac/hardware_speed_question.png" alt="" class="feedback-ico" /> -->
      <div class="feedback-text">视频卡顿</div>
    </div>
    <el-dialog
      title="播放卡顿解决办法"
      :visible.sync="ifShowHardwareDialog"
      width="698px"
      custom-class="hardWare-msg"
      center
      v-if="ifShowHardwareDialog"
    >
      <el-tabs v-model="activeName" @tab-click="tabSelect">
        <el-tab-pane
          v-for="(tab, ind) in tabsList"
          :key="ind"
          :label="tab.label"
          :name="tab.name"
        >
          <div>
            <div class="title-lev1 bold">建议操作：</div>
            <div class="msg-line mt6">
              关闭硬件加速设置（硬件加速开启会影响视频）
            </div>
            <div class="title-lev1 mt11 bold">
              操作步骤（{{ tab.label }}）：
            </div>
            <div class="msg-line mt6">{{ browserObj.desc }}</div>
            <div
              class="msg-line-img mt20"
              :style="{
                'background-image':
                  'url(//image.zlketang.com/public/news/images/ac/hardware_speed/' +
                  browserObj.imgName +
                  '.png)'
              }"
            ></div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="ifShowHardwareDialog = false">
          我知道了
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import zlIcon from '@/components/zlIcon.vue'
export default {
  components: {
    'zl-icon': zlIcon
  },
  props: {
    player: null
  },
  data() {
    return {
      // 是否展示硬件加速提示按钮
      ifShowHardwareBtn: false,
      // 是否展示硬件加速提示弹窗
      ifShowHardwareDialog: false,
      // 硬件加速提示弹窗-tabs数据
      tabsList: [
        { label: '谷歌浏览器', name: 'chrome' },
        { label: 'Edge', name: 'edge' },
        { label: '360', name: '360' },
        { label: 'QQ', name: 'qq' }
      ],
      // 硬件加速提示弹窗-tabs激活的tab
      activeName: 'chrome',
      // 当前系统类型 目前只判断win/mac
      sysType: 'win',
      browserObj: {
        type: 'chrome',
        name: '谷歌浏览器',
        imgName: 'chrome_v1',
        desc: '右上角... -> 设置 -> 系统 -> 使用硬件加速模式（如果可用）'
      },
      config: {
        win: [
          {
            type: 'chrome',
            name: '谷歌浏览器',
            imgName: 'chrome_v1',
            desc: '右上角... -> 设置 -> 系统 -> 使用硬件加速模式（如果可用）'
          },
          {
            type: 'edge',
            name: 'edge浏览器',
            imgName: 'edge',
            desc: '右上角... -> 设置 -> 系统和性能 -> 使用硬件加速（如可用）'
          },
          {
            type: '360',
            name: '360浏览器',
            imgName: 'win_360',
            desc: '右上角按钮 -> 设置 -> 实验室 -> 智能开启硬件加速'
          },
          {
            type: 'qq',
            name: 'QQ浏览器',
            imgName: 'win_qq',
            desc: '右上角按钮 -> 设置 -> 高级 -> 开启GPU加速渲染网页'
          }
        ],
        mac: [
          {
            type: 'chrome',
            name: '谷歌浏览器',
            imgName: 'chrome_v1',
            desc: '右上角... -> 设置 -> 系统 -> 使用硬件加速模式（如果可用）'
          },
          {
            type: 'edge',
            name: 'edge浏览器',
            imgName: 'edge',
            desc: '右上角... -> 设置 -> 系统和性能 -> 使用硬件加速（如可用）'
          },
          {
            type: '360',
            name: '360浏览器',
            imgName: 'mac_360',
            desc: '右上角按钮 -> 设置 -> 高级设置 -> 智能开启硬件加速'
          },
          {
            type: 'qq',
            name: 'QQ浏览器',
            imgName: 'mac_qq',
            desc: '右上角按钮 -> 设置 -> 系统 -> 使用硬件加速模式（如果可用）'
          }
        ]
      }
    }
  },
  mounted() {
    this.checkIfOpenHardwareSpeed()
  },
  methods: {
    checkIfOpenHardwareSpeed() {
      this.ifShowHardwareBtn = false
      var canvas = document.createElement('canvas')
      var ctx =
        canvas.getContext('webgl') || canvas.getContext('experimental-webgl')
      if (ctx) {
        var debugInfo = ctx.getExtension('WEBGL_debug_renderer_info')
        var renderer = ctx.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL)
        this.hardwareStr = renderer
        //已开启硬件加速的字样：ANGLE (Intel, Intel(R) UHD Graphics 630 Direct3D11 vs_5_0 ps_5_0, D3D11)
        this.ifShowHardwareBtn = /(NVIDIA|AMD|Intel)/i.test(
          renderer.toLowerCase()
        )
      }
    },
    // 打开详情弹窗
    openDetail() {
      // 获取系统类型
      this.sysType = this.getSystemType()
      if (!['win', 'mac'].includes(this.sysType)) {
        this.sysType = 'win'
      }
      // this.activeName = 'chrome'

      this.ifShowHardwareDialog = true
      // 获取浏览器类型
      this.browserType = this.getBrowser()
      this.activeName = this.getBrowser()
      this.getBrowserObj(this.activeName)

      //根据系统类型和浏览器类型决定展示内容
      // let curArr = this.config[this.sysType]
      // let ind = curArr.findIndex((ele) => {
      //   return ele.type === this.browserType
      // })
      // this.browserObj = curArr[ind]

      // this.ifShowHardwareDialog = true
      // 动态渲染弹窗内容
      // const h = this.$createElement
      // this.$msgbox({
      //   title: '播放卡顿解决办法',
      //   customClass: 'hardWare-msg',
      //   message: h('p', null, [
      //     h('div', { class: 'title-lev1 bold ml15' }, `建议操作：`),
      //     h('div', { class: 'msg-line mt6 ml15' }, `关闭硬件加速设置（硬件加速开启会影响视频）`),
      //     h('div', { class: 'title-lev1 bold mt10 ml15' }, `操作步骤（${browserObj.name}）：`),
      //     h('div', { class: 'msg-line mt6 ml15' }, `${browserObj.desc}`),
      //     h(
      //       'div',
      //       {
      //         class: 'msg-line-img mt20',
      //         style: `background-image:url(//image.zlketang.com/public/news/images/ac/hardware_speed/${browserObj.imgName}.png)`
      //       },
      //       ''
      //     )
      //   ]),
      //   showCancelButton: false,
      //   confirmButtonText: '我知道了'
      // })
      //   .then(() => {
      //     // player.play()
      //   })
      //   .finally(() => {
      //     // player.play()
      //   })
    },

    //获取当前的浏览器
    getBrowser() {
      // 获取浏览器 userAgent
      var ua = navigator.userAgent

      // 是否为 Edge
      var isEdge = ua.indexOf('Edg') > -1
      // 返回结果
      if (isEdge) {
        return 'edge'
      }

      // 是否为 Chrome
      var isChrome =
        ua.indexOf('Chrome') > -1 &&
        ua.indexOf('Edge') == -1 &&
        ua.indexOf('QQBrowser') == -1
      // 返回结果
      if (isChrome) {
        return 'chrome'
      }

      // 是否为 QQ
      var isQQ = ua.indexOf('QQBrowser') > -1
      // 返回结果
      if (isQQ) {
        return 'qq'
      }
      // 360浏览器（极速内核）
      var is360 = ua.indexOf('360SE') > -1
      // 返回结果
      if (is360) {
        return '360'
      }
      // 都不是
      return 'chrome'
    },

    //检测系统 win/mac
    getSystemType() {
      //平台、设备和操作系统
      let agent = navigator.userAgent.toLowerCase()
      console.log(agent)
      let windows = agent.indexOf('win') > -1 || agent.indexOf('wow') > -1
      let Linux = String(navigator.platform).indexOf('Linux') > -1
      let mac = /macintosh|mac x/i.test(agent)
      let iOS = !!agent.match(/\(i[^;]+;( u;)? cpu.+mac os x/)
      let android = agent.indexOf('android') > -1 || agent.indexOf('adr') > -1

      if (windows) return 'win'
      if (Linux && !android) return 'Linux '
      if (mac) return 'mac'
      if (iOS) return 'IOS'
      if (android) return 'Android'
    },

    // 根据系统类型和浏览器类型获取browserObj
    getBrowserObj(browserType) {
      let curArr = this.config[this.sysType]
      this.browserObj = curArr.find(ele => {
        return ele.type === browserType
      })
    },
    // tab切换
    tabSelect(tab) {
      this.getBrowserObj(tab.name)
    }
  }
}
</script>

<style scoped>
.feedback-ico {
  position: relative;
  top: 2px;
  width: 22px;
  height: 22px;
}

.mt11 {
  margin-top: 11px;
}

.feedback-text {
  margin: 0 0 0 6px;
  font-size: 16px;
  font-weight: 400;
  /* color: #8c8c8c; */
}

.msg-line {
  /* css-ignore */
  display: block;
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 20px;
}

.msg-line-img {
  /* css-ignore */
  width: 638px;
  height: 440px;
  display: block;
  background: no-repeat;
  background-size: 100% 100%;
}

.title-lev1 {
  /* css-ignore */
  height: 22px;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #383838;
  line-height: 22px;
}

.hardware-component /deep/ .el-dialog__title {
  width: 176px;
  height: 30px;
  font-size: 22px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #383838;
  line-height: 30px;
}

.hardware-component /deep/ .el-dialog__headerbtn {
  font-size: 20px;
}

.hardware-component /deep/ .el-dialog__body {
  padding-top: 10px;
  padding-right: 30px;
  padding-bottom: 18px;
  padding-left: 30px;
}

.hardware-component /deep/ .el-button {
  padding: 6px 30px;
  border-radius: 18px;
  background: #3480ff;
  border-color: #3480ff;

  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 20px;
}
.fix-btn-hidden {
  margin: unset !important;
  padding: unset !important;
}
.hardware-component /deep/ .el-tabs__item {
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  line-height: 22px;
}
.hardware-component /deep/ .el-tabs__item.is-active {
  color: #5796ff;
}
.hardware-component /deep/ .el-tabs__item:hover {
  color: #5796ff;
}
.hardware-component /deep/ .el-tabs__header {
  margin-bottom: 33px;
}
.hardware-component /deep/ .el-dialog__footer {
  display: none;
}
.hardware-component /deep/ .el-dialog__wrapper {
  overflow: hidden;
}
.hardware-component /deep/ .el-dialog--center {
  top: 50%;
  transform: translateY(-50%);
  height: 730px;
  margin-top: unset !important;
}
</style>
<style>
/* .hardWare-msg {
  width: 698px;
  height: 730px;
}

.hardWare-msg .el-message-box__title {
  text-align: center;
}

.hardWare-msg .el-message-box__btns {
  text-align: center;
  padding: 20px 15px 0;
}

.hardWare-msg .el-button {
  border-radius: 18px;
  padding: 6px 30px;
  background: #3480ff;
}

.hardWare-msg .el-button span {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
}

.hardWare-msg .el-message-box__header {
  padding: 30px 15px 10px;
}

.hardWare-msg .el-message-box__header span {
  height: 30px;
  font-size: 22px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #383838;
  line-height: 30px;
} */
</style>
